<template>
	<NavBar :title="'分类'" />
	<view class="box-good-choice-first">
		<view class="box-first"></view>
	</view>
	<view class="box-good-choice">
		<view class="grid-good-choice">
			<theme-item
				class="theme-item"
				:name="item.name"
				:create_time="item.create_time"
				:src="item.url"
				v-for="item in arr_theme.value"
				:key="item.id"
				@tap="open_themeColumn(item.category)"
			/>
		</view>
	</view>
</template>

<script setup>
import { reactive, onBeforeMount } from 'vue'
import { get_theme } from '../../api'

const arr_theme = reactive({ value: [] })

const api_get_theme = async function () {
	let res = await get_theme(1, 19)
	// console.log(res.data)
	res.data.forEach((i, index) => {
		// const timeDiff = now - createTime.getTime()
		let temp_time = new Date(i.create_time)
		res.data[index]['create_time'] = temp_time.getTime()
	})

	arr_theme.value = res.data
	// console.log(arr_theme.value)
}

onBeforeMount(() => {
	api_get_theme()
})

const open_themeColumn = function (category) {
	let arg = '?category=' + category
	uni.navigateTo({
		url: '/pages/themeColumn/themeColumn' + arg
	})
}
</script>

<style scoped lang="scss">
.box-good-choice {
	margin: 0 $my-margin-rpx;

	.grid-good-choice {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		justify-items: center;
		align-items: center;
		grid-gap: 10rpx;

		// grid-template-columns: repeat(2, 340rpx);
		// place-content: space-around space-evenly;
		// grid-gap: 10rpx;
		// .theme-item {
		// 	width: 100%;
		// 	height: 300rpx;
		// }
	}
}
</style>
